<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360全景图1</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏或者设置状态栏的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 禁止缓存访问页面-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- 页面关键词-->
<!--<link rel="stylesheet" href="css/demo01.css">-->
<script src="../static/three.js/three.min.js"></script>
<script src="../static/three.js/photo-sphere-viewer.js"></script>
<!--<script src="../static/three.js/demo01.js"></script>-->

<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

<style>
#container,#your-pano{ max-width:900px; text-align:center; margin:0 auto;}
</style>
</head>
<body>
<p style="text-align: center;">
<a href="#" id="go">读取默认图片</a>
</p>
<h3>
<div id="your-pano"></div>
<form method="get" action="example1.html">
<p style="text-align: center;">
<input type="file" name="pano" id="pano" />
</p>
</form>
<div class="main">
<h3 id="title">旋转查看效果</h3>
<div id="container" class="container">5555</div>
</div>
<script>
window.onload = function() {
	document.getElementById('go').addEventListener('click', loadPredefinedPanorama, false);
	document.getElementById('pano').addEventListener('change', upload, false);
};

// Load a panorama stored on the user's computer
function upload() {
	// Retrieve the chosen file and create the FileReader object
	var file = document.getElementById('pano').files[0];
	var reader = new FileReader();

	reader.onload = function() {
		PSV = new PhotoSphereViewer({
			// Panorama, given in base 64
			panorama: reader.result,

			// Container
			container: 'your-pano',

			// Deactivate the animation
			time_anim: false,

			// Display the navigation bar
			navbar: true,

			// Resize the panorama
			size: {
				width: '100%',
				height: '500px'
			},

			// No XMP data
			usexmpdata: false
		});
	};

	reader.readAsDataURL(file);
}


function loadPredefinedPanorama() {
	//evt.preventDefault();

	// Loader
	var loader = document.createElement('div');
	loader.className = 'loader';

	// Panorama display
	var div = document.getElementById('container');
	div.style.height = '30px';

	PSV = new PhotoSphereViewer({
		// Path to the panorama
		panorama: '3d3.jpg',
		long_offset: 0.003,
        lat_offset: 0.002,
		//zoomRangeWidth: 2,//缩放的范围，单位显示，默认值50。
        //zoomRangeThickness: 1,//缩放的范围的厚度，单位像素，默认值1。
		//zoomRangeDisk: 7,//缩放范围的圆盘直径，单位像素，默认值为7。 
		// Container
		container: div,

		// Deactivate the animation
		time_anim: false,

		// Display the navigation bar
		navbar: true,

		// Resize the panorama
		size: {
			width: '100%',
			height: '700px'
		},

		// HTML loader
		loading_html: loader,

		// Disable smooth moves to test faster
		smooth_user_moves: false
	});
}
var PSV;
//loadPredefinedPanorama();
/*
panorama：3d.jpg;//必填参数，全景图的路径。
container：;//必填参数，放置全景图的div元素。
autoload：;//可选，默认值为true，true为自动调用全景图，false为在后面加载全景图（通过.load()方法）。
usexmpdata：;//可选，默认值为true，如果Photo Sphere Viewer必须读入XMP数据则为true。
default_position：;//可选，默认值为{}，定义默认的位置，及用户看见的第一个点，例如：{long: Math.PI, lat: Math.PI/2}。
min_fov：;//可选，默认值为30，观察的最小区域，单位degrees，在1-179之间。
max_fov：;//可选，默认值为90，观察的最大区域，单位degrees，在1-179之间。
allow_user_interactions：//可选，默认值为true，设置为false则禁止用户和全景图交互（导航条不可用）。
tilt_up_max：;//可选，默认值为Math.PI/2，向上倾斜的最大角度，单位radians。
tilt_down_max：;//可选，默认值为Math.PI/2，向下倾斜的最大角度，单位radians。
zoom_level：;//可选，默认值为0，默认的缩放级别，值在0-100之间。
long_offset：;//可选，默认值为PI/360，mouse/touch移动时每像素经过的经度值。
lat_offset：;//可选，默认值为PI/180，mouse/touch移动时每像素经过的纬度值。
time_anim：;//可选，默认值为2000，全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）
theta_offset：;//过时的选项，可选，默认值为1440，自动动画时水平方向的速度。
anim_speed：;//可选，默认值为2rpm，动画的速度，每秒/分钟多少radians/degrees/revolutions。
navbar：;//可选值，默认为false。显示导航条。
navbar_style：;//可选值，默认为{}。导航条的自定义样式。下面是可用的样式列表：
backgroundColor：;//导航条的背景颜色，默认值为rgba(61, 61, 61, 0.5)。
buttonsColor：;//按钮的前景颜色，默认值为transparent。
activeButtonsBackgroundColor：;//按钮激活状态的背景颜色，默认值为rgba(255, 255, 255, 0.1)。
buttonsHeight：;//按钮的高度，单位像素，默认值为20。
autorotateThickness：;//autorotate图标的厚度，单位像素，默认值为1。
zoomRangeWidth：;//缩放的范围，单位显示，默认值50。
zoomRangeThickness：;//缩放的范围的厚度，单位像素，默认值1。
zoomRangeDisk：;//缩放范围的圆盘直径，单位像素，默认值为7。
fullscreenRatio：;//全屏图标的比例，默认值为3/4。
fullscreenThickness：;//全屏图标的厚度，单位像素，默认值为2。
loading_msg：;//可选，默认值为Loading…，图片加载时的提示文字。
loading_img：;//可选，默认值为null，在加载时显示的图片的路径。
size：;//可选，默认值null，全景图容器的最终尺寸。例如：{width: 500, height: 300}。
onready：;//可选值，默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。
*/


</script>
</body>
</html>
